<template>
	<view class="savepadding">
		<view class="step-bg">
			
			<u-steps current="1" activeColor="#1573FF" inactiveColor="#A7A7A7">
				<u-steps-item title="添加基础信息" ></u-steps-item>
				<u-steps-item title="添加维保信息" ></u-steps-item>
			</u-steps>
			
			<!-- <u-steps current="1" :mode="number" :list="numList" active-color="#1573FF" un-active-color="#A7A7A7">
			</u-steps> -->
		</view>
		<u-form ref="uform" label-width="auto">

			<view class="">
				<u-icon name="order" color="#1573FF" label="年检.保险信息" label-color="#333333"></u-icon>
			</view>
			
			<u-form-item><view style="font-size: 32rpx;color: #333;">年检信息</view></u-form-item>
			
			<u-form-item label="年检开始时间" @click="pickerShow(1)" borderBottom>
				<u-input 
				v-model="inspectionAddPO.thisTime"
			    disabled disabledColor="#ffffff" border="none"
				inputAlign="right" 
				placeholder="请选择" 
				></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			
			<u-form-item label="下次年检时间" @click="pickerShow(2)" borderBottom>
				<u-input 
				v-model="inspectionAddPO.nextTime"
				disabled disabledColor="#ffffff" border="none"
				inputAlign="right" 
				placeholder="请选择" 
				></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="年审年份"  borderBottom>
				<u-input v-model="inspectionAddPO.inspectionYear" border="none" inputAlign="right" placeholder="请输入" ></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			
			<u-form-item label="费用" borderBottom>
				<u-input v-model="inspectionAddPO.inspectionAmount" @change="inspectionAmountChange" type="digit" border="none" inputAlign="right" placeholder="请输入"></u-input>
			</u-form-item>
			<u-form-item label="分期数" borderBottom>
				<u-input v-model="inspectionAddPO.inspectNumber" :disabled="yearlyStatus" @change="inspectNumberChange" type="number" border="none" inputAlign="right" placeholder="请输入"></u-input>
			</u-form-item>
			<u-form-item label="年审代理人" borderBottom>
				<u-input v-model="inspectionAddPO.inspectionAgent" border="none" inputAlign="right" placeholder="请输入"></u-input>
			</u-form-item>
			<u-form-item label="备注" borderBottom>
				<u-input v-model="inspectionAddPO.remark" border="none" inputAlign="right" placeholder="请输入" type="textarea"></u-input>
			</u-form-item>
			<u-form-item>
				<view class="car-photo" style="padding: 20rpx 0; display: block;font-size: 30rpx;color: #333;">年检图片</view>
				<lr-upload objType="7" tag="1" @on-change="uploadOnChange"></lr-upload>
			</u-form-item>
			<u-collapse>
				<u-collapse-item :title="item.title" v-for="(item, index) in inspectionAddPO.inspectionInstallmentPlan" :key="index">
				<u-form-item label="账单类型" borderBottom>
					<u-input v-model="item.feeName" border="none" inputAlign="right"  disabled></u-input>
				</u-form-item>
				<u-form-item label="应付金额/元" borderBottom>
					<u-input v-model="item.payableAmount" border="none" inputAlign="right" placeholder="请输入" ></u-input>
				</u-form-item>
				<u-form-item label="应付日期" borderBottom @click="pickerShow(9,item)">
					<u-input
					v-model="item.payableTime"
					disabled disabledColor="#ffffff" border="none"
					inputAlign="right" 
					placeholder="请选择" 
					></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="备注" borderBottom>
					<u-input v-model="item.remark" border="none" inputAlign="right" placeholder="请输入" type="textarea"></u-input>
				</u-form-item>
				<u-form-item label="生成应付账单" borderBottom>
					<u-switch v-model="item.isGenerateBill" slot="right"></u-switch>	
				</u-form-item>
	
				</u-collapse-item>
			</u-collapse>
			<u-form-item><view style="font-size: 32rpx;color: #333;">交强险信息</view></u-form-item>
			<u-form-item label="保险公司" @click="pickerShow(3)" borderBottom>
				<u-input 
				v-model="insuranceCompulsoryAddPO.compulsoryCompany"
				disabled disabledColor="#ffffff" border="none"
				inputAlign="right" 
				placeholder="请选择" 
				></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			
			<u-form-item label="交强险开始时间" @click="pickerShow(4)" borderBottom>
				<u-input 
				v-model="insuranceCompulsoryAddPO.compulsoryStartTime"
				disabled disabledColor="#ffffff" border="none"
				inputAlign="right" 
				placeholder="请选择" 
				></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			
			<u-form-item label="交强险结束时间" @click="pickerShow(5)" borderBottom>
				<u-input 
				v-model="insuranceCompulsoryAddPO.compulsoryEndTime"
				disabled disabledColor="#ffffff" border="none"
				inputAlign="right" 
				placeholder="请选择" 
				></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			
			<u-form-item label="交强险保单号" borderBottom>
				<u-input v-model="insuranceCompulsoryAddPO.compulsoryNo" border="none" inputAlign="right" placeholder="请输入"></u-input>
			</u-form-item>
			<u-form-item label="费用" borderBottom>
				<u-input v-model="insuranceCompulsoryAddPO.compulsoryAmount" @change="compulsoryAmountChange" type="digit" border="none" inputAlign="right" placeholder="请输入"></u-input>
			</u-form-item>
			<u-form-item label="分期数" borderBottom>
				<u-input v-model="insuranceCompulsoryAddPO.compulsoryFeePeriods" :disabled="compulsoryYearlyStatus" @change="compulsoryNumberChange" type="number" border="none" inputAlign="right" placeholder="请输入"></u-input>
			</u-form-item>
			<u-form-item label="备注" borderBottom>
				<u-input v-model="insuranceCompulsoryAddPO.compulsoryRemark" border="none" inputAlign="right" placeholder="请输入" type="textarea"></u-input>
			</u-form-item>
			<u-form-item>
				<view class="car-photo" style="padding: 20rpx 0; display: block;font-size: 30rpx;color: #333;">交强险保单</view>
				<lr-upload objType="15" tag="2" @on-change="uploadOnChange"></lr-upload>
			</u-form-item>
			<u-collapse>
				<u-collapse-item :title="item.title" v-for="(item, index) in insuranceCompulsoryAddPO.compulsoryInstallmentPlan" :key="index">
				<u-form-item label="账单类型" borderBottom>
					<u-input v-model="item.feeName" border="none" inputAlign="right"  disabled></u-input>
				</u-form-item>
				<u-form-item label="应付金额/元" borderBottom>
					<u-input v-model="item.payableAmount" border="none" inputAlign="right" placeholder="请输入" ></u-input>
				</u-form-item>
				<u-form-item label="应付日期" borderBottom @click="pickerShow(10,item)">
					<u-input
					v-model="item.payableTime"
					disabled disabledColor="#ffffff" border="none"
					inputAlign="right" 
					placeholder="请选择" 
					></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="备注" borderBottom>
					<u-input v-model="item.remark" border="none" inputAlign="right" placeholder="请输入" type="textarea"></u-input>
				</u-form-item>
				<u-form-item label="生成应付账单" borderBottom>
					<u-switch v-model="item.isGenerateBill" slot="right"></u-switch>	
				</u-form-item>
				
				</u-collapse-item>
			</u-collapse>
			
			<u-form-item><view style="font-size: 32rpx;color: #333;">承运险信息</view></u-form-item>
			<u-form-item label="保险公司" @click="pickerShow(12)" borderBottom>
				<u-input 
				v-model="insuranceCarrierAddPO.carrierCompany"
				disabled disabledColor="#ffffff" border="none"
				inputAlign="right" 
				placeholder="请选择" 
				></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			
			<u-form-item label="承运险开始时间" @click="pickerShow(13)" borderBottom>
				<u-input 
				v-model="insuranceCarrierAddPO.carrierStartTime"
				disabled disabledColor="#ffffff" border="none"
				inputAlign="right" 
				placeholder="请选择" 
				></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			
			<u-form-item label="承运险结束时间" @click="pickerShow(14)" borderBottom>
				<u-input 
				v-model="insuranceCarrierAddPO.carrierEndTime"
				disabled disabledColor="#ffffff" border="none"
				inputAlign="right" 
				placeholder="请选择" 
				></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			
			<u-form-item label="承运险保单号" borderBottom>
				<u-input v-model="insuranceCarrierAddPO.carrierNo" border="none" inputAlign="right" placeholder="请输入"></u-input>
			</u-form-item>
			<u-form-item label="费用" borderBottom>
				<u-input v-model="insuranceCarrierAddPO.carrierAmount" @change="insuranceAmountChange" type="digit" border="none" inputAlign="right" placeholder="请输入"></u-input>
			</u-form-item>
			<u-form-item label="分期数" borderBottom>
				<u-input v-model="insuranceCarrierAddPO.carrierFeePeriods" :disabled="insuranceYearlyStatus" @change="insuranceNumberChange" type="number" border="none" inputAlign="right" placeholder="请输入"></u-input>
			</u-form-item>
			<u-form-item label="备注" borderBottom>
				<u-input v-model="insuranceCarrierAddPO.carrierRemark" border="none" inputAlign="right" placeholder="请输入" type="textarea"></u-input>
			</u-form-item>
			<u-form-item>
				<view class="car-photo" style="padding: 20rpx 0; display: block;font-size: 30rpx;color: #333;">承运险保单</view>
				<lr-upload objType="15" tag="2" @on-change="uploadOnChange"></lr-upload>
			</u-form-item>
			<u-collapse>
				<u-collapse-item :title="item.title" v-for="(item, index) in insuranceCarrierAddPO.carrierInstallmentPlan" :key="index">
				<u-form-item label="账单类型" borderBottom>
					<u-input v-model="item.feeName" border="none" inputAlign="right"  disabled></u-input>
				</u-form-item>
				<u-form-item label="应付金额/元" borderBottom>
					<u-input v-model="item.payableAmount" border="none" inputAlign="right" placeholder="请输入" ></u-input>
				</u-form-item>
				<u-form-item label="应付日期" borderBottom @click="pickerShow(15,item)">
					<u-input
					v-model="item.payableTime"
					disabled disabledColor="#ffffff" border="none"
					inputAlign="right" 
					placeholder="请选择" 
					></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="备注" borderBottom>
					<u-input v-model="item.remark" border="none" inputAlign="right" placeholder="请输入" type="textarea"></u-input>
				</u-form-item>
				<u-form-item label="生成应付账单" borderBottom>
					<u-switch v-model="item.isGenerateBill" slot="right"></u-switch>	
				</u-form-item>
				
				</u-collapse-item>
			</u-collapse>
			
			
			<u-form-item><view style="font-size: 32rpx;color: #333;">商业险信息</view></u-form-item>
			<u-form-item label="保险公司" @click="pickerShow(6)" borderBottom>
				<u-input 
				v-model="insuranceCommercialAddPO.commercialCompany"
				disabled disabledColor="#ffffff" border="none"
				inputAlign="right" 
				placeholder="请选择" 
				></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="商业险开始时间" @click="pickerShow(7)" borderBottom>
				<u-input 
				v-model="insuranceCommercialAddPO.commercialStartTime"
				disabled disabledColor="#ffffff" border="none"
				inputAlign="right"
				placeholder="请选择" 
				></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="商业险结束时间" @click="pickerShow(8)" borderBottom>
				<u-input 
				v-model="insuranceCommercialAddPO.commercialEndTime"
				disabled disabledColor="#ffffff" border="none"
				inputAlign="right" 
				placeholder="请选择" 
				></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="商业险保单号" borderBottom>
				<u-input v-model="insuranceCommercialAddPO.commercialNo" border="none" inputAlign="right" placeholder="请输入"></u-input>
			</u-form-item>
			<u-form-item label="商业险险种" @click="addCommercialTypes" borderBottom>
				<u-input v-model="commercialTypeTitle" inputAlign="right" disabled="true" disabledColor="#ffffff" border="none" placeholder="添加商业险险种" type="select"></u-input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="费用" borderBottom>
				<u-input v-model="insuranceCommercialAddPO.commercialTotalAmount" type="digit" border="none" disabled="true" disabledColor="#ffffff" inputAlign="right" placeholder="自动计算"></u-input>
			</u-form-item>
			<u-form-item label="分期数" borderBottom>
				<u-input v-model="insuranceCommercialAddPO.commercialFeePeriods" :disabled="commercialYearlyStatus" @change="commercialNumberChange" type="number" border="none" inputAlign="right" placeholder="请输入"></u-input>
			</u-form-item>
			<u-form-item label="备注" borderBottom>
				<u-input v-model="insuranceCommercialAddPO.commercialRemark" border="none" inputAlign="right" placeholder="请输入" type="textarea"></u-input>
			</u-form-item>
			<u-form-item>
				<view class="car-photo" style="padding: 20rpx 0; display: block;font-size: 30rpx;color: #333;">商业险保单</view>
				<lr-upload objType="12" tag="3" @on-change="uploadOnChange"></lr-upload>
			</u-form-item>
			<u-collapse>
				<u-collapse-item :title="item.title" v-for="(item, index) in insuranceCommercialAddPO.commercialInstallmentPlan" :key="index">
				<u-form-item label="账单类型" borderBottom>
					<u-input v-model="item.feeName" border="none" inputAlign="right"  disabled></u-input>
				</u-form-item>
				<u-form-item label="应付金额/元" borderBottom>
					<u-input v-model="item.payableAmount" border="none" inputAlign="right" placeholder="请输入" ></u-input>
				</u-form-item>
				<u-form-item label="应付日期" borderBottom @click="pickerShow(11,item)">
					<u-input
					v-model="item.payableTime"
					disabled disabledColor="#ffffff" border="none"
					inputAlign="right" 
					placeholder="请选择" 
					></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="备注" borderBottom>
					<u-input v-model="item.remark" border="none" inputAlign="right" placeholder="请输入" type="textarea"></u-input>
				</u-form-item>
				<u-form-item label="生成应付账单" borderBottom>
					<u-switch v-model="item.isGenerateBill" slot="right"></u-switch>	
				</u-form-item>
				
				</u-collapse-item>
			</u-collapse>
		</u-form>
		
		<view style="height: 100rpx;"></view>
		
		<view class="button-container">
			<button class="btn-item btn-left" @click="bottomClick(1)">上一步</button>
			<button class="btn-item btn-right" @click="bottomClick(2)">提交</button>
		</view>
		<!-- 承运险应付日期 -->
		<u-datetime-picker :show="insuranceDuedateShow" mode="date"
			v-model="value1" :maxDate="value2"
			@confirm="timeconfirm" @cancel="insuranceDuedateShow=false"></u-datetime-picker>
		<!-- 商业险应付日期 -->
		<u-datetime-picker :show="commercialDuedateShow" mode="date"
			v-model="value1" :maxDate="value2"
			@confirm="timeconfirm" @cancel="commercialDuedateShow=false"></u-datetime-picker>
		<!-- 交强险应付日期 -->
		<u-datetime-picker :show="compulsoryDuedateShow" mode="date"
			v-model="value1" :maxDate="value2"
			@confirm="timeconfirm" @cancel="compulsoryDuedateShow=false"></u-datetime-picker>
		<!-- 年检开始时间 -->
		<!-- 年检应付日期 -->
		<u-datetime-picker :show="duedateShow" mode="date"
			v-model="value1" :maxDate="value2"
			@confirm="timeconfirm" @cancel="duedateShow=false"></u-datetime-picker>
		<!-- 年检开始时间 -->
		<u-datetime-picker :show="inspectionStartShow" mode="date"
			v-model="value1" :maxDate="value2"
			@confirm="timeconfirm" @cancel="inspectionStartShow=false"></u-datetime-picker>
		<!-- 年检开始时间 -->
		<u-datetime-picker :show="inspectionStartShow" mode="date"
			v-model="value1" :maxDate="value2"
			@confirm="timeconfirm" @cancel="inspectionStartShow=false"></u-datetime-picker>
		<!-- <u-picker :mode="mode" v-model="inspectionStartShow" @confirm="pickerConfim()"></u-picker> -->
		<!-- 年检结束时间 -->
		<u-datetime-picker :show="inspectionEndShow" mode="date"
			v-model="value2" :minDate="value1"
			@confirm="timeconfirm" @cancel="inspectionEndShow=false"></u-datetime-picker>
		<!-- <u-picker :mode="mode" v-model="inspectionEndShow" @confirm="pickerConfim()"></u-picker> -->
		<!-- 强险开始时间 -->
		<u-datetime-picker :show="compulsoryStartShow" mode="date"
			v-model="value3" :maxDate="value4"
			@confirm="timeconfirm" @cancel="compulsoryStartShow=false"></u-datetime-picker>
		<!-- 承运开始时间 -->
		<u-datetime-picker :show="insuranceStartShow" mode="date"
			v-model="value3" :maxDate="value4"
			@confirm="timeconfirm" @cancel="insuranceStartShow=false"></u-datetime-picker>
		<!-- 承运结束时间 -->
		<u-datetime-picker :show="insuranceEndShow" mode="date"
			v-model="value3" :maxDate="value4"
			@confirm="timeconfirm" @cancel="insuranceEndShow=false"></u-datetime-picker>
		<!-- <u-picker :mode="mode" v-model="compulsoryStartShow" @confirm="pickerConfim()"></u-picker> -->
		<!-- 强险结束时间 -->
		<u-datetime-picker :show="compulsoryEndShow" mode="date"
			v-model="value4" :minDate="value3"
			@confirm="timeconfirm" @cancel="compulsoryEndShow=false"></u-datetime-picker>
		<!-- <u-picker :mode="mode" v-model="compulsoryEndShow" @confirm="pickerConfim()"></u-picker> -->
		<!-- 商险开始时间 -->
		<u-datetime-picker :show="commercialStartShow" mode="date"
			v-model="value5" :maxDate="value6"
			@confirm="timeconfirm" @cancel="commercialStartShow=false"></u-datetime-picker>
		<!-- <u-picker :mode="mode" v-model="commercialStartShow" @confirm="pickerConfim()"></u-picker> -->
		<!-- 商险结束时间 -->
		<u-datetime-picker :show="commercialEndShow" mode="date"
			v-model="value6" :minDate="value5"
			@confirm="timeconfirm" @cancel="commercialEndShow=false"></u-datetime-picker>
		<!-- <u-picker :mode="mode" v-model="commercialEndShow" @confirm="pickerConfim()"></u-picker> -->
		
		<!-- 交强险保险公司 -->
		<u-picker :show="compulsoryCompanyShow" :columns="carInsuranceCompanyList" keyName="companyName"
			@confirm="pickerConfim" @cancel="compulsoryCompanyShow=false"></u-picker>
		<!-- 承运险保险公司 -->
		<u-picker :show="insuranceCompanyShow" :columns="carInsuranceCompanyList" keyName="companyName"
			@confirm="pickerConfim" @cancel="insuranceCompanyShow=false"></u-picker>
			
		<!-- <u-picker 
		:mode="mode"
		v-model="compulsoryCompanyShow" 
		:default-selector="[0]" 
		:range="carInsuranceCompanyList" 
		range-key="companyName" 
		@confirm="pickerConfim()"
		></u-picker> -->
		
		<!-- 商业险保险公司 -->
		<u-picker :show="commercialCompanyShow" :columns="carInsuranceCompanyList" keyName="companyName"
			@confirm="pickerConfim" @cancel="commercialCompanyShow=false"></u-picker>
			
		<!-- <u-picker 
		:mode="mode"
		v-model="commercialCompanyShow" 
		:default-selector="[0]" 
		:range="carInsuranceCompanyList" 
		range-key="companyName" 
		@confirm="pickerConfim()"
		></u-picker> -->
		
		
	</view>
</template>

<script>
	import lrUpload from '../../components/global/lr-upload.vue'
		
	export default {
		components: {
			lrUpload
		},
		data() {
			return {
				value1:Number(new Date()),
				value2:Number(new Date())+12*30*24*3600*1000,
				value3:Number(new Date()),
				value4:Number(new Date())+12*30*24*3600*1000,
				value5:Number(new Date()),
				value6:Number(new Date())+12*30*24*3600*1000,
				type: 0,
				mode: 'time',
				inspectionStartShow:false,
				inspectionEndShow:false,
				
				compulsoryCompanyShow:false,
				compulsoryStartShow:false,
				compulsoryEndShow:false,
				insuranceCompanyShow:false,
				insuranceStartShow:false,
				insuranceEndShow:false,
				
				commercialCompanyShow:false,
				commercialStartShow:false,
				commercialEndShow:false,
				duedateShow:false,
				compulsoryDuedateShow:false,
				commercialDuedateShow:false,
				insuranceDuedateShow:false,
				yearlyItem:null,
				compulsoryYearlyItem:null,
				commercialYearlyItem:null,
				insuranceYearlyItem:null,
				
				carInsuranceCompanyList:[],
				commercialTypeTitle:'',
				//图片上传地址
				// action: 'http://139.9.238.105:8389/xz-ec-api/app/upload/files.do',
				numList: [{
						name: '添加基础信息'
					},
					{
						name: '添加维保信息'
					},
				],

                //年检信息
				inspectionAddPO: {
					thisTime : null,
					nextTime : null,
					inspectionAmount: null,
					inspectNumber:null,
					inspectionYear:null,
					inspectionAgent: null,
					remark: null,
					attachment: [],
					inspectionInstallmentPlan:[],
				},
				//交强险信息
				insuranceCompulsoryAddPO: {
					compulsoryStartTime: null,
					compulsoryEndTime: null,
					compulsoryNo: null,
					compulsoryCompanyId: null,
					compulsoryCompany: null,
					compulsoryAmount: null,
					compulsoryRemark: null,
					compulsorySysAccessoryList: [],
					compulsoryFeePeriods:null,
					compulsoryInstallmentPlan:[],
				},
				//商业险信息
				insuranceCommercialAddPO: {
					commercialStartTime : null,
					commercialEndTime: null,
					commercialNo: null,
					commercialCompanyId: null,
					commercialCompany: null,
					commercialTotalAmount: null,
					commercialRemark: null,
					commercialInsuranceRecordList: [],
					commercialSysAccessoryList: [],
					commercialFeePeriods:null,
					commercialInstallmentPlan:[],
					
				},
				//承运险信息
				insuranceCarrierAddPO:{
					carrierEndTime: null,
					carrierStartTime: null,
					compulsoryNo: null,
					carrierCompanyId: null,
					carrierCompany: null,
					carrierAmount: null,
					carrierRemark: null,
					compulsorySysAccessoryList: [],
					carrierFeePeriods:null,
					carrierInstallmentPlan:[],
				},
				//随车物品
				checkboxList: [],
				yearlyStatus:true,
				compulsoryYearlyStatus:true,
				commercialYearlyStatus:true,
				insuranceYearlyStatus:true,
			}
		},
		watch:{
			'inspectionAddPO.inspectionInstallmentPlan':{
				deep:true,
				handler(val){
					this.inspectionAddPO.inspectionInstallmentPlan =val
				}
			},
			inspectionAddPO:{
				deep:true,
				handler(val){
					this.inspectionAddPO =val
				}
			},
			'insuranceCompulsoryAddPO.compulsoryInstallmentPlan':{
				deep:true,
				handler(val){
					this.insuranceCompulsoryAddPO.compulsoryInstallmentPlan =val
				}
			},
			insuranceCompulsoryAddPO:{
				deep:true,
				handler(val){
					this.insuranceCompulsoryAddPO =val
				}
			},
			'insuranceCommercialAddPO.commercialInstallmentPlan':{
				deep:true,
				handler(val){
					this.insuranceCommercialAddPO.commercialInstallmentPlan =val
				}
			},
			insuranceCommercialAddPO:{
				deep:true,
				handler(val){
					this.insuranceCommercialAddPO =val
					// 商业险的金额是带出来,所以在这里控制分期数的的状态
					if(val.commercialTotalAmount){
						this.commercialYearlyStatus = false
						console.log(val.commercialTotalAmount,111)
					}else{
						this.commercialYearlyStatus = true
					}
				}
			},
			insuranceCarrierAddPO:{
				deep:true,
				handler(val){
					this.insuranceCarrierAddPO =val
				}
			},
			'insuranceCarrierAddPO.carrierInstallmentPlan':{
				deep:true,
				handler(val){
					this.insuranceCarrierAddPO.carrierInstallmentPlan =val
				}
			},
		},
		onLoad(option) {
			var inspectionAddPO = getApp().globalData.inspectionAddPO;
			if(this.$u.test.isEmpty(inspectionAddPO) == false) {
				this.inspectionAddPO = inspectionAddPO;
			}
			
			var insuranceCompulsoryAddPO = getApp().globalData.insuranceCompulsoryAddPO;
			if(this.$u.test.isEmpty(insuranceCompulsoryAddPO) == false) {
				this.insuranceCompulsoryAddPO = insuranceCompulsoryAddPO;
			}
			
			var insuranceCommercialAddPO = getApp().globalData.insuranceCommercialAddPO;
			if(this.$u.test.isEmpty(insuranceCommercialAddPO) == false) {
				this.insuranceCommercialAddPO = insuranceCommercialAddPO;
			}
			
			getApp().globalData.inspectionAddPO={}
			getApp().globalData.insuranceCompulsoryAddPO={}
			getApp().globalData.insuranceCommercialAddPO={}
			
			
			//获取缓存中的保险公司
            this.carInsuranceCompanyList = [this.$store.state.params.insuranceCompanyList];

      uni.$on('addInsType', res=>{
        this.insuranceCommercialAddPO.commercialInsuranceRecordList = res.commercialInsuranceRecordList;
        this.insuranceCommercialAddPO.commercialTotalAmount = res.commercialAmount;
        this.commercialTypeTitle = res.commercialTypeTitle;
      })
		},

		methods: {
			formatMoney(amount) {
			  return amount.toLocaleString();
			},
			divideMoney(amount, divisor) {
			  return this.formatMoney(amount) / this.formatMoney(divisor)
			},
			// 年检金额
			inspectionAmountChange(event){
				const reg = /^\d+(\.\d{1,4})?$/
				if(reg.test(event)){
					this.yearlyStatus = false
				}else{
					this.yearlyStatus = true
					uni.showToast({
						icon: 'none',
						title:"请输入正确金额",
						
					})
				}
			},
			// 交强险金额
			compulsoryAmountChange(event){
				const reg = /^\d+(\.\d{1,4})?$/
				if(reg.test(event)){
					this.compulsoryYearlyStatus = false
				}else{
					this.compulsoryYearlyStatus = true
					uni.showToast({
						icon: 'none',
						title:"请输入正确金额",
						
					})
				}
			},
			// 承运险金额
			insuranceAmountChange(event){
				const reg = /^\d+(\.\d{1,4})?$/
				if(reg.test(event)){
					this.insuranceYearlyStatus = false
				}else{
					this.insuranceYearlyStatus = true
					uni.showToast({
						icon: 'none',
						title:"请输入正确金额",
						
					})
				}
			},
			// 商业险金额
			// commercialAmountChange(event){
			// 	const reg = /^\d+(\.\d{1,4})?$/
			// 	if(reg.test(event)){
			// 		this.commercialYearlyStatus = false
			// 	}else{
			// 		this.commercialYearlyStatus = true
			// 		uni.showToast({
			// 			icon: 'none',
			// 			title:"请输入正确金额",
						
			// 		})
			// 	}
			// },
			// 年检保险信息期数改变
			inspectNumberChange(event){
				if(this.inspectionAddPO.inspectionAmount && this.inspectionAddPO.inspectionAmount !==null){
					const reg = /^\+?[1-9]\d*$/
					if(reg.test(event)){
						const cost = Number(this.inspectionAddPO.inspectionAmount)
						const periods = Number(event)
						const payNum = this.divideMoney(cost,periods)
						// const payNum = cost/periods
						console.log(payNum,'payNum')
						this.inspectionAddPO.inspectionInstallmentPlan = []
						for (let i =0;i<event;i++){
							setTimeout(()=>{
								const num = this.inspectionAddPO.inspectionInstallmentPlan?.length
								let obj = {
									payableAmount:payNum,
									remark:null,
									payableTime:null,
									type:0,
									feeName:'年检险费用',
									isGenerateBill:false,
									title:`第${num+1}期`,
									ids:new Date().getTime()
								}
								this.inspectionAddPO.inspectionInstallmentPlan.push(obj)
							},200)
							
						}
						
					}else{
						this.inspectionAddPO.inspectionInstallmentPlan = []
						uni.showToast({
							icon: 'none',
							title:"请输入小于100的正整数",
							
						})
					}
				}else{
					this.$set(this.inspectionAddPO,'inspectNumber',null)
					uni.showToast({
						icon: 'none',
						title:"请先输入费用",
						
					})
				}
				
			},
			// 交强险保险期数改变
			compulsoryNumberChange(event){
				if(this.insuranceCompulsoryAddPO.compulsoryAmount && this.insuranceCompulsoryAddPO.compulsoryAmount !==null){
					const reg = /^\+?[1-9]\d*$/
					if(reg.test(event)){
						const cost = Number(this.insuranceCompulsoryAddPO.compulsoryAmount)
						const periods = Number(event)
						const payNum = this.divideMoney(cost,periods)
						// const payNum = cost/periods
						console.log(payNum,'payNum')
						this.insuranceCompulsoryAddPO.compulsoryInstallmentPlan = []
						for (let i =0;i<event;i++){
							setTimeout(()=>{
								const num = this.insuranceCompulsoryAddPO.compulsoryInstallmentPlan?.length
								let obj = {
									payableAmount:payNum,
									remark:null,
									payableTime:null,
									type:1,
									feeName:"交强险费用",
									isGenerateBill:false,
									title:`第${num+1}期`,
									ids:new Date().getTime()
								}
								this.insuranceCompulsoryAddPO.compulsoryInstallmentPlan.push(obj)
							},200)
							
						}
						
					}else{
						this.insuranceCompulsoryAddPO.compulsoryInstallmentPlan = []
						uni.showToast({
							icon: 'none',
							title:"请输入小于100的正整数",
							
						})
					}
				}else{
					this.$set(this.insuranceCompulsoryAddPO,'compulsoryFeePeriods',null)
					uni.showToast({
						icon: 'none',
						title:"请先输入费用",
						
					})
				}
			},
			//商业保险期数改变
			commercialNumberChange(event){
				if(this.insuranceCommercialAddPO.commercialTotalAmount && this.insuranceCommercialAddPO.commercialTotalAmount !==null){
					const reg = /^\+?[1-9]\d*$/
					if(reg.test(event)){
						const cost = Number(this.insuranceCommercialAddPO.commercialTotalAmount)
						const periods = Number(event)
						const payNum = this.divideMoney(cost,periods)
						// const payNum = cost/periods
						console.log(payNum,'payNum')
						this.insuranceCommercialAddPO.commercialInstallmentPlan = []
						for (let i =0;i<event;i++){
							setTimeout(()=>{
								const num = this.insuranceCommercialAddPO.commercialInstallmentPlan?.length
								let obj = {
									payableAmount:payNum,
									remark:null,
									payableTime:null,
									type:2,
									feeName:'商业保险费用',
									isGenerateBill:false,
									title:`第${num+1}期`,
									ids:new Date().getTime()
								}
								this.insuranceCommercialAddPO.commercialInstallmentPlan.push(obj)
							},200)
							
						}
						
					}else{
						this.insuranceCommercialAddPO.commercialInstallmentPlan = []
						uni.showToast({
							icon: 'none',
							title:"请输入小于100的正整数",
							
						})
					}
				}else{
					this.$set(this.insuranceCommercialAddPO,'commercialFeePeriods',null)
					uni.showToast({
						icon: 'none',
						title:"请先输入费用",
						
					})
				}
			},
			// 承运险保险期数改变
			insuranceNumberChange(event){
				if(this.insuranceCarrierAddPO.carrierAmount && this.insuranceCarrierAddPO.carrierAmount !==null){
					const reg = /^\+?[1-9]\d*$/
					if(reg.test(event)){
						const cost = Number(this.insuranceCarrierAddPO.carrierAmount)
						const periods = Number(event)
						const payNum = this.divideMoney(cost,periods)
						// const payNum = cost/periods
						console.log(payNum,'payNum')
						this.insuranceCarrierAddPO.carrierInstallmentPlan = []
						for (let i =0;i<event;i++){
							setTimeout(()=>{
								const num = this.insuranceCarrierAddPO.carrierInstallmentPlan?.length
								let obj = {
									payableAmount:payNum,
									remark:null,
									payableTime:null,
									type:3,
									feeName:'承运险费用',
									isGenerateBill:false,
									title:`第${num+1}期`,
									ids:new Date().getTime()
								}
								this.insuranceCarrierAddPO.carrierInstallmentPlan.push(obj)
							},200)
							
						}
						
					}else{
						this.insuranceCarrierAddPO.carrierInstallmentPlan = []
						uni.showToast({
							icon: 'none',
							title:"请输入小于100的正整数",
							
						})
					}
				}else{
					this.$set(this.insuranceCarrierAddPO,'carrierFeePeriods',null)
					uni.showToast({
						icon: 'none',
						title:"请先输入费用",
						
					})
				}
			}
			,
			//是否显示相关pickerview
			pickerShow(type,item) {
				console.log(type,'123231')
				switch(type) {
					 case 1:
					 this.inspectionStartShow = true;
					 this.mode = 'time';
					 break
					 case 2:
					 this.inspectionEndShow = true;
					 this.mode = 'time';
					 break
					 case 3: 
					 this.compulsoryCompanyShow = true;
					 this.mode = 'selector';
					 break
					 case 4:
					 this.compulsoryStartShow = true;
					 this.mode = 'time';
					 break
					 case 5: 
					 this.compulsoryEndShow = true;
					 this.mode = 'time';
					 break
					 case 6:
					 this.commercialCompanyShow = true;
					 this.mode = 'selector';
					 break
					 case 7:
					 this.commercialStartShow = true;
					 this.mode = 'time';
					 break
					 case 8:
					 this.commercialEndShow = true;	
					 this.mode = 'time';
					 break
					 case 9:
					 this.duedateShow = true;	
					 this.mode = 'time';
					 this.yearlyItem = item
					 break
					 case 10:
					 this.compulsoryDuedateShow = true;	
					 this.mode = 'time';
					 this.compulsoryYearlyItem = item
					 break
					 case 11:
					 this.commercialDuedateShow = true;	
					 this.mode = 'time';
					 this.commercialYearlyItem = item
					 break
					 case 12: 
					 this.insuranceCompanyShow = true;
					 this.mode = 'selector';
					 break
					 case 13:
					 this.insuranceStartShow = true;
					 this.mode = 'time';
					 break
					 case 14:
					 this.insuranceEndShow = true;
					 this.mode = 'time';
					 break
					 case 15:
					 this.insuranceDuedateShow = true;	
					 this.mode = 'time';
					 this.insuranceYearlyItem = item
					 break
					 
					 
				}
				this.type = type;
				
			},
			
			timeconfirm(e) {
				
				let timeStr = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				
				switch(this.type){
					case 1://年检开始时间
					this.inspectionStartShow = false;
					this.inspectionAddPO.thisTime = timeStr;
					break
					case 2://年检结束时间
					this.inspectionEndShow = false;
					this.inspectionAddPO.nextTime = timeStr;
					break
					case 4: //强险开始时间
					this.compulsoryStartShow = false;
					this.insuranceCompulsoryAddPO.compulsoryStartTime = timeStr;
					break
					case 5: //强险结束时间
					this.compulsoryEndShow = false;
					this.insuranceCompulsoryAddPO.compulsoryEndTime = timeStr;
					break
					case 7: //商险开始时间
					this.commercialStartShow = false;
					this.insuranceCommercialAddPO.commercialStartTime = timeStr;
					break
					case 8: //商险结束时间
					this.commercialEndShow = false;
					this.insuranceCommercialAddPO.commercialEndTime = timeStr;
					break
					case 9: //年检费用应付日期
					this.duedateShow = false;
					console.log(this.yearlyItem,'this.yearlyItem')
					this.inspectionAddPO.inspectionInstallmentPlan?.map((res)=>{
						console.log(res)
						if(res.ids==this.yearlyItem.ids){
							this.$set(res,'payableTime',timeStr)
							res.payableTime = timeStr
						}
					})
					break
					case 10: //交强险应付日期
					this.compulsoryDuedateShow = false;
					console.log(this.compulsoryYearlyItem,'this.compulsoryYearlyItem')
					this.insuranceCompulsoryAddPO.compulsoryInstallmentPlan?.map((res)=>{
						console.log(res)
						if(res.ids==this.compulsoryYearlyItem.ids){
							this.$set(res,'payableTime',timeStr)
							res.payableTime = timeStr
						}
					})
					break
					case 11: //商业险应付日期
					this.commercialDuedateShow = false;
					console.log(this.commercialYearlyItem,'this.commercialYearlyItem')
					this.insuranceCommercialAddPO.commercialInstallmentPlan?.map((res)=>{
						console.log(res)
						if(res.ids==this.commercialYearlyItem.ids){
							this.$set(res,'payableTime',timeStr)
							res.payableTime = timeStr
						}
					})
					break
					case 13: //承运险开始时间
					this.insuranceStartShow = false;
					this.insuranceCarrierAddPO.carrierStartTime = timeStr;
					break
					case 14: //承运险结束时间
					this.insuranceEndShow = false;
					this.insuranceCarrierAddPO.carrierEndTime = timeStr;
					break	
					case 15: // 承运险应付日期
					this.insuranceDuedateShow = false;
					console.log(this.insuranceYearlyItem,'this.insuranceYearlyItem')
					this.insuranceCarrierAddPO.carrierInstallmentPlan?.map((res)=>{
						console.log(res)
						if(res.ids==this.insuranceYearlyItem.ids){
							this.$set(res,'payableTime',timeStr)
							res.payableTime = timeStr
						}
					})
				}
				
			},
			
			//picker回调函数
			pickerConfim(e){
				
				let obj = e.value[0];
				switch(this.type){
					
					case 3: //强险公司	
					this.compulsoryCompanyShow = false;
					this.insuranceCompulsoryAddPO.compulsoryCompany =  obj.companyName;
					this.insuranceCompulsoryAddPO.compulsoryCompanyId = obj.companyId;
					break
					
					case 6: //商险公司
					this.commercialCompanyShow = false;
					this.insuranceCommercialAddPO.commercialCompany =  obj.companyName;
					this.insuranceCommercialAddPO.commercialCompanyId = obj.companyId;
					break
					
					case 12: //承运公司
					this.insuranceCompanyShow = false;
					this.insuranceCarrierAddPO.carrierCompany =  obj.companyName;
					this.insuranceCarrierAddPO.carrierCompanyId = obj.companyId;
					break
					
				}
			},
			//图片上传成功回调
			uploadOnChange(tag, resultList, resultObjList) {
				console.log(tag, resultList, resultObjList);
				switch(tag) {
					case '1': //年检图片
					 this.inspectionAddPO.attachment = resultObjList;
					break
					
					case '2': //强险图片
					 this.insuranceCompulsoryAddPO.compulsorySysAccessoryList = resultObjList;
					break
					
					case '3': //商险图片
					 this.insuranceCommercialAddPO.commercialSysAccessoryList = resultObjList;
					break
					
					
				}
			},
			//添加商业险险种
			addCommercialTypes() {
				var intentData = JSON.stringify(this.insuranceCommercialAddPO.commercialInsuranceRecordList);
				uni.navigateTo({
					url:'addCar-insuranceTypeList?insuranceRecordList=' + intentData
				})
			},
			
			bottomClick(type) {
				let that = this
				
				//全局存储
				getApp().globalData.addCarParams.inspectionAddPO = this.inspectionAddPO;
				getApp().globalData.addCarParams.insuranceCompulsoryAddPO = this.insuranceCompulsoryAddPO;
				getApp().globalData.addCarParams.insuranceCommercialAddPO = this.insuranceCommercialAddPO;
				getApp().globalData.addCarParams.insuranceCarrierAddPO = this.insuranceCarrierAddPO;
				if(type == 1) {//上一步
					uni.navigateBack({
						
					})
				}else if(type == 2){//提交
				
					uni.showModal({
						content: '确定提交吗?',
						success(res) {
							if (res.confirm) {
								let info = getApp().globalData.addCarParams
								let data = JSON.parse(JSON.stringify(info))
								// 年检费用
								const cost = Number(data.inspectionAddPO.inspectionAmount)
								// 交强保险费用
								const cost1 = Number(data.insuranceCompulsoryAddPO.compulsoryAmount)
								// 商业险费用
								const cost2 = Number(data.insuranceCommercialAddPO.commercialTotalAmount)
								// 承运险费用
								const cost3 = Number(data.insuranceCarrierAddPO.carrierAmount)
								let num = 0
								let num1 =0
								let num2 = 0
								let num3 = 0
								data.inspectionAddPO?.inspectionInstallmentPlan?.map((res)=>{
									if(res.isGenerateBill==true){
										that.$set(res,'isGenerateBill',1)
									}else{
										that.$set(res,'isGenerateBill',0)
									}
									num = num + Number(res.payableAmount)
								})
								if(num !==cost){
									uni.showToast({
										icon: 'none',
										title:"分期数金额不等于总费用",
										
									})
									return
								}
								data.insuranceCompulsoryAddPO?.compulsoryInstallmentPlan?.map((res)=>{
									if(res.isGenerateBill==true){
										that.$set(res,'isGenerateBill',1)
									}else{
										that.$set(res,'isGenerateBill',0)
									}
									num1 = num1 + Number(res.payableAmount)
								})
								if(num1 !==cost1){
									uni.showToast({
										icon: 'none',
										title:"分期数金额不等于总费用",
										
									})
									return
								}
								data.insuranceCommercialAddPO?.commercialInstallmentPlan?.map((res)=>{
									if(res.isGenerateBill==true){
										that.$set(res,'isGenerateBill',1)
									}else{
										that.$set(res,'isGenerateBill',0)
									}
									num2 = num2 + Number(res.payableAmount)
								})
								if(num2 !==cost2){
									uni.showToast({
										icon: 'none',
										title:"分期数金额不等于总费用3",
										
									})
									return
								}
								data.insuranceCarrierAddPO?.carrierInstallmentPlan?.map((res)=>{
									if(res.isGenerateBill==true){
										that.$set(res,'isGenerateBill',1)
									}else{
										that.$set(res,'isGenerateBill',0)
									}
									num3 = num3 + Number(res.payableAmount)
								})
								if(num3 !==cost3){
									uni.showToast({
										icon: 'none',
										title:"分期数金额不等于总费用",
										
									})
									return
								}
								console.log(getApp().globalData.addCarParams,'getApp().globalData.addCarParams')
								that.$u.api.addCar(
								   data
								).then(res=> {
									uni.$emit('refreshcar')
									that.$u.toast('提交成功');
									setTimeout(()=>{
										uni.navigateBack({
											delta:2
										});
									}, 1000)
									
								})
							}
						}
					})
					
				}
			}
			
			
			
		}
	}
</script>

<style lang="scss">
	.step-bg {
		background-color: $xz-bgColor-write;
		margin: 0;
		height: 113rpx;

	}
	
	.licesson-upload{
		display: flex;
		align-items: center;
	}
	
	.u-form {
		margin: 10px;
	    padding: 22rpx;
		background-color: $xz-bgColor-write;
	}
	
	.u-input {
		font-size: 24rpx;
	}
	
	// .button-container2 {
	// 	display: flex;
	// 	position: fixed;
	// 	width: 100%;
	// 	height: 100rpx;
	// 	bottom: 0;
	// 	z-index: 999;
	// 	background-color: white;
	// 	align-items: center;
	// 	justify-content: space-around;
	// }
	
	
	// button {
	// 	width: 45%;
	// 	height: 80rpx;
	// 	line-height: 80rpx;
	// 	border-radius: 40rpx;
	// 	color: $xz-bgColor-write;
	// }
	
	.btn-left {
		background-color: $xz-textColor-A7;
	}
	.btn-right {
		background-color: $xz-bgColor-blue;
	}
	
</style>
